<script setup lang="ts">
import { computed } from 'vue'
import { RouterLink } from 'vue-router'
import type { Server } from '@/types/server'

const props = defineProps<{
  server: Server
}>()

// 显示名称，优先使用中文描述
const displayDescription = computed(() => {
  return props.server.description_cn || props.server.description || '暂无描述'
})

// 截断描述文本
const truncatedDescription = computed(() => {
  const maxLength = 100
  const desc = displayDescription.value
  return desc.length > maxLength ? desc.substring(0, maxLength) + '...' : desc
})

// 标签颜色映射
const tagColorMap: Record<string, string> = {
  'web': 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
  'python': 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
  'javascript': 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300',
  'tool': 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300',
  'search': 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300',
  'ai': 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300',
  'default': 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300'
}

// 获取标签颜色类
const getTagColorClass = (tag: string) => {
  const lowerTag = tag.toLowerCase()
  
  for (const [key, value] of Object.entries(tagColorMap)) {
    if (lowerTag.includes(key)) {
      return value
    }
  }
  
  return tagColorMap.default
}

// 获取访问模式的样式
const getAccessModeStyle = (mode: string) => {
  const modeColorMap: Record<string, string> = {
    'LOCAL': 'bg-blue-100 text-blue-800 dark:bg-blue-700 dark:text-blue-300',
    'SSE': 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300',
    'HTTP': 'bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-300'
  }
  
  return modeColorMap[mode] || modeColorMap.LOCAL
}

// 格式化日期
const formatDate = (dateStr: string) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return date.toLocaleDateString('zh-CN')
}

// 获取区域标识的样式和标签
const getZoneInfo = (zone: string | null | undefined) => {
  if (!zone) return null
  // zone = "COMMON"
  
  const zoneMap: Record<string, { label: string; class: string }> = {
    'YELLOW': { 
      label: '黄区', 
      class: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300 border-yellow-200 dark:border-yellow-800' 
    },
    'GREEN': { 
      label: '绿区', 
      class: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300 border-green-200 dark:border-green-800' 
    },
    'COMMON': { 
      label: '通用区', 
      class: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300 border-blue-200 dark:border-blue-800' 
    }
  }
  
  return zoneMap[zone] || { label: zone, class: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-700' }
}
</script>

<template>
  <RouterLink :to="`/servers/${server.id}`" class="block h-full">
    <div class="card h-full shadow-md border border-gray-100 dark:border-gray-700 bg-white dark:bg-gray-800 rounded-lg hover:shadow-xl hover:shadow-primary-500/10 dark:hover:shadow-primary-500/5 hover:translate-y-[-6px] transition-all duration-300 relative overflow-hidden group">
      <!-- 闪光效果 -->
      <div class="absolute -inset-1 rounded-lg bg-gradient-to-r from-primary-500 to-secondary-500 opacity-0 group-hover:opacity-20 blur transition duration-500 group-hover:duration-200 overflow-hidden"></div>
      
      <div class="relative p-6 h-full flex flex-col">
        <div class="flex justify-between items-start mb-3">
          <div>
            <h3 class="text-xl font-bold text-gray-900 dark:text-white truncate mb-1 group-hover:text-primary-500 dark:group-hover:text-primary-400 transition-colors duration-300">
              {{ server.name }}
            </h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">
              {{ server.provider }}
            </p>
          </div>
          <span 
            :class="[getAccessModeStyle(server.access_mode), 'inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium']"
          >
            {{ server.access_mode }}
          </span>
        </div>
        
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-300 flex-grow">
          {{ truncatedDescription }}
        </p>
        
        <div class="mt-4 flex flex-wrap gap-2">
          <span 
            v-if="server.category && server.category.length" 
            class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-secondary-100 text-secondary-800 dark:bg-secondary-900 dark:text-secondary-300"
          >
            {{ server.category_cn && server.category_cn.length ? server.category_cn[0] : server.category[0] }}
          </span>
          <span 
            v-for="tag in server.tags.slice(0, 3)" 
            :key="tag" 
            :class="[getTagColorClass(tag), 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium transform transition-transform hover:scale-105']"
          >
            {{ tag }}
          </span>
          <span 
            v-if="server.tags.length > 3" 
            class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300"
          >
            +{{ server.tags.length - 3 }}
          </span>
        </div>
        
        <div class="mt-6 flex justify-between items-center text-xs text-gray-500 dark:text-gray-400 border-t border-gray-100 dark:border-gray-800 pt-4">
          <div class="flex items-center">
            <span 
              class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300"
              v-if="server.is_internal"
            >
            华为内部
            </span>
            <span 
              class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-300"
              v-else
            >
            外部社区
            </span>
          </div>
          <div class="flex items-center gap-2">
            <span 
              v-if="getZoneInfo(server.zone)"
              :class="[
                getZoneInfo(server.zone)?.class,
                'inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold border shadow-sm'
              ]"
            >
              {{ getZoneInfo(server.zone)?.label }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </RouterLink>
</template> 